<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三峡大学计算机与信息学院</title>
    <link rel="stylesheet" href="../css/page.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../download/iconfont/iconfont.css">
</head>

<body>
    <div class="header">
        <div class="headerBody">
            <div class="logo">
                <img src="../images/Iconfont.png" alt="">
            </div>

            <div class="right">
                <div class="center">
                    <input type="text" placeholder="请输入关键字">
                    <div class="button">
                        <button>搜索</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="banner">
        <div class="navigation">
            <ul class="list">
                <li><a href="javascript:;" id="one">首页</a></li>
                <li><a href="javascript:;" id="two">学院概况</a></li>
                <li><a href="javascript:;" id="three">学院动态</a></li>
                <li><a href="javascript:;" id="four">师资队伍</a></li>
                <li><a href="javascript:;" id="five">本科生培养</a></li>
                <li><a href="javascript:;" id="six">研究生培养</a></li>
                <li><a href="javascript:;" id="seven">学科建设</a></li>
                <li><a href="javascript:;" id="eight">科学研究</a></li>
                <li><a href="javascript:;" id="nine">党建工作</a></li>
                <li><a href="javascript:;" id="ten">学生工作</a></li>
                <li><a href="javascript:;" id="eleven">教工之家</a></li>
            </ul>
        </div>

        <div class="active2">
            <ul>
                <li><a href="javascript:;">学院简介</a></li>
                <li><a href="javascript:;">学院领导</a></li>
                <li><a href="javascript:;">机构设置</a></li>
                <li><a href="javascript:;">发展规划</a></li>
                <li><a href="javascript:;">宣传视频</a></li>
            </ul>
        </div>


        <div class="active3">
            <ul>
                <li><a href="javascript:;">学院动态</a></li>
                <li><a href="javascript:;">通知公告</a></li>
                <li><a href="javascript:;">行业新闻</a></li>
                <li><a href="javascript:;">视频新闻</a></li>
            </ul>
        </div>

        <div class="active4">
            <ul>
                <li><a href="javascript:;">师资概况</a></li>
                <li><a href="javascript:;">教师列表</a></li>

            </ul>
        </div>

        <div class="active5">
            <ul>
                <li><a href="javascript:;">部门概况</a></li>
                <li><a href="javascript:;">考试专栏</a></li>
                <li><a href="javascript:;">专业介绍</a></li>
                <li><a href="javascript:;">实践教学</a></li>
                <li><a href="javascript:;">文件下载</a></li>
                <li><a href="javascript:;">本科教务</a></li>
                <li><a href="javascript:;">留学生教务</a></li>
            </ul>
        </div>

        <div class="active6">
            <ul>
                <li><a href="javascript:;">部门概况</a></li>
                <li><a href="javascript:;">最新公告</a></li>
                <li><a href="javascript:;">学位点简介</a></li>
                <li><a href="javascript:;">招生信息</a></li>
                <li><a href="javascript:;">教师风采</a></li>
                <li><a href="javascript:;">研究生教育</a></li>
                <li><a href="javascript:;">培养管理</a></li>
                <li><a href="javascript:;">学位管理</a></li>
                <li><a href="javascript:;">学工动态</a></li>
                <li><a href="javascript:;">培养方案</a></li>
                <li><a href="javascript:;">教学大纲</a></li>
                <li><a href="javascript:;">文件下载</a></li>
            </ul>
        </div>


        <div class="active7">
            <ul>
                <li><a href="javascript:;">学术动态</a></li>
                <li><a href="javascript:;">重点学科</a></li>
                <li><a href="javascript:;">基地建设</a></li>
                <li><a href="javascript:;">学术团队</a></li>
                <li><a href="javascript:;">学位点建设</a></li>
            </ul>
        </div>

        <div class="active8">
            <ul>
                <li><a href="javascript:;">部门概况</a></li>
                <li><a href="javascript:;">研究方向</a></li>
                <li><a href="javascript:;">最新公告</a></li>
                <li><a href="javascript:;">科研政策</a></li>
                <li><a href="javascript:;">科研项目</a></li>
                <li><a href="javascript:;">科研成果</a></li>
            </ul>
        </div>



        <div class="active9">
            <ul>
                <li><a href="javascript:;">学生概况</a></li>
                <li><a href="javascript:;">学工概况</a></li>
                <li><a href="javascript:;">招生动态</a></li>
                <li><a href="javascript:;">留学生动态</a></li>
                <li><a href="javascript:;">规章制度</a></li>
                <li><a href="javascript:;">就业信息</a></li>
                <li><a href="javascript:;">奖贷助勤</a></li>
                <li><a href="javascript:;">科技创新</a></li>
                <li><a href="javascript:;">学生荣誉</a></li>
                <li><a href="javascript:;">思政课堂</a></li>
                <li><a href="javascript:;">团委学生会</a></li>
            </ul>
        </div>



        <div class="active10">
            <ul>
                <li><a href="javascript:;">学生概况</a></li>
                <li><a href="javascript:;">学工概况</a></li>
                <li><a href="javascript:;">招生动态</a></li>
                <li><a href="javascript:;">留学生动态</a></li>
                <li><a href="javascript:;">规章制度</a></li>
                <li><a href="javascript:;">就业信息</a></li>
                <li><a href="javascript:;">奖贷助勤</a></li>
                <li><a href="javascript:;">科技创新</a></li>
                <li><a href="javascript:;">学生荣誉</a></li>
                <li><a href="javascript:;">思政课堂</a></li>
                <li><a href="javascript:;">团委学生会</a></li>
                <li><a href="javascript:;">科技社团</a></li>
                <li><a href="javascript:;">活动广场</a></li>
                <li><a href="javascript:;">下载专区</a></li>
                <li><a href="javascript:;">学生成果展</a></li>
                <li><a href="javascript:;">青年志愿者</a></li>

            </ul>
        </div>

        <div class="active11">
            <ul>
                <li><a href="javascript:;" style="margin-left: 27px;">工会概况</a></li>
                <li><a href="javascript:;" style="margin-left: 27px;">工会活动</a></li>
            </ul>
        </div>

        <div class="pic">
            <img src="../images/ban1.png" alt="">
        </div>

        <!-- roll -->
        <div class="roll">
            <div class="q_left">
                <div class="top">
                    <div class="title">
                        <div class="title1" style="width:10% ;">学院动态</div>
                        <div class="title2" style="width:77% ;">NEWS</div>
                        <a href="javascript:;">
                            <div class="iconfont icon-gengduo" style="margin-left: 100px;"></div>
                        </a>
                    </div>
                </div>

                <div class="bottom">
                    <div class="rolling">
                        <div class="pic">
                            <img src="../images/c1.png" alt="">
                            <ul>
                                <li data-name="a" class="button1 p-active">1</li>
                                <li data-name="b" class="button2">2</li>
                                <li data-name="c" class="button3">3</li>
                                <li data-name="d" class="button4">4</li>
                                <li data-name="e" class="button5">5</li>
                            </ul>
                        </div>
                        <div class="bwords">当十八岁遇见一百岁，校长喊你过成人礼</div>

                    </div>
                    <div class="table">
                        <div style="height: 1px;background-color: #1e5fc2;"></div>

                        <div class="content">
                            <span style="font-size: 15px;line-height: 23px;" class="left">
                                <a href="javascript:;"
                                    title="魏宁博士研究成果在国际知名期刊《IEEE Transactions on Industrial Informatics》发表">魏宁博士研究成果在国际知名期刊《IEEE
                                    Transactions on Industrial Informatics》发表</a></span>
                            <span style="float: right;" class="right">6-29</span>
                        </div>

                        <div style="height: 0.5px;background-color: #e1e1e1;"></div>

                        <div class="content">
                            <span style="font-size: 15px;line-height: 23px;" class="left">
                                <a href="javascript:;" title="上好 “开学第一课”——计算机与信息学院开展新学期宿舍走访工作">上好
                                    “开学第一课”——计算机与信息学院开展新学期宿舍走访工作</a></span>
                            <span style="float: right;" class="right">3-29</span>
                        </div>

                        <div style="height: 0.5px;background-color: #e1e1e1;"></div>

                        <div class="content">
                            <span style="font-size: 15px;line-height: 23px;" class="left">
                                <a href="javascript:;"
                                    title="计算机与信息学院召开2024年春季学期“三全育人”班主任工作会">计算机与信息学院召开2024年春季学期“三全育人”班主任工作会</a></span>
                            <span style="float: right;" class="right">3-21</span>
                        </div>

                        <div style="height: 0.5px;background-color: #e1e1e1;"></div>

                        <div class="content">
                            <span style="font-size: 15px;line-height: 23px;" class="left">
                                <a href="javascript:;" title="我校电子信息硕士学位授权点全票通过专项核验">我校电子信息硕士学位授权点全票通过专项核验</a></span>
                            <span style="float: right;" class="right">1-15</span>
                        </div>

                        <div style="height: 0.5px;background-color: #e1e1e1;"></div>

                        <div class="content">
                            <span style="font-size: 15px;line-height: 23px;" class="left">
                                <a href="javascript:;"
                                    title="魏宁博士研究成果在国际知名期刊《IEEE Transactions on Industrial Informatics》发表">魏宁博士研究成果在国际知名期刊《IEEE
                                    Transactions on Industrial Informatics》发表</a></span>
                            <span style="float: right;" class="right">6-29</span>
                        </div>

                        <div style="height: 0.5px;background-color: #e1e1e1;"></div>

                        <div class="content">
                            <span style="font-size: 15px;line-height: 23px;" class="left">
                                <a href="javascript:;" title="我院开展“感受艺术魅力 弘扬时代精神”主题美育思政课">我院开展“感受艺术魅力
                                    弘扬时代精神”主题美育思政课</a></span>
                            <span style="float: right;" class="right">2-29</span>
                        </div>

                        <div style="height: 0.5px;background-color: #e1e1e1;"></div>

                    </div>
                </div>

            </div>
            <div class="stack">
                <div><a href="javascript:;"><img src="../images/button1.jpg" alt=""></a></div>
                <div><a href="javascript:;"><img src="../images/button2.jpg" alt=""></a></div>
                <div><a href="javascript:;"><img src="../images/button3.jpg" alt=""></a></div>
                <div><a href="javascript:;"><img src="../images/button4.jpg" alt=""></a></div>
            </div>
        </div>


        <!-- pronouncition -->
        <div class="pronouncition">

            <div class="graytable" style="width:486.59px;">
                <div class="title">
                    <div class="title1">通知公告</div>
                    <div class="title2">ANNOUNCEMENT</div>
                    <a href="javascript:;">
                        <div class="iconfont icon-gengduo" style="margin-left: 50px;"></div>
                    </a>
                </div>
                <div class="line"></div>
                <div class="artical">
                    <div class="content">
                        <span style="font-size: 15px;line-height: 23px;" class="left">
                            <a href="javascript:;"
                                title="魏宁博士研究成果在国际知名期刊《IEEE Transactions on Industrial Informatics》发表">魏宁博士研究成果在国际知名期刊《IEEE
                                Transactions on Industrial Informatics》发表</a></span>
                        <span style="float: right;" class="right">6-29</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 15px;line-height: 23px;" class="left">
                            <a href="javascript:;"
                                title="关于召开学院处级领导班子和领导干部2023年度述职述廉大会暨 2024年春季学期第1次全体教职工大会的通知">关于召开学院处级领导班子和领导干部2023年度述职述廉大会暨
                                2024年春季学期第1次全体教职工大会的通知</a></span>
                        <span style="float: right;" class="right">3-11</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 15px;line-height: 23px;" class="left">
                            <a href="javascript:;"
                                title="魏宁博士研究成果在国际知名期刊《IEEE Transactions on Industrial Informatics》发表">魏宁博士研究成果在国际知名期刊《IEEE
                                Transactions on Industrial Informatics》发表</a></span>
                        <span style="float: right;" class="right">6-29</span>
                    </div>


                    <div class="content">
                        <span style="font-size: 15px;line-height: 23px;" class="left">
                            <a href="javascript:;"
                                title="关于召开2024年春季学期“三全育人”班主任工作会的通知">关于召开2024年春季学期“三全育人”班主任工作会的通知</a></span>
                        <span style="float: right;" class="right">2-27</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 15px;line-height: 23px;" class="left">
                            <a href="javascript:;" title="关于召开学院全体教职工大会的通知">关于召开学院全体教职工大会的通知
                            </a></span>
                        <span style="float: right;" class="right">1-11</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 15px;line-height: 23px;" class="left">
                            <a href="javascript:;"
                                title="关于认真做好2024年寒假期间学生教育管理工作的通知">关于认真做好2024年寒假期间学生教育管理工作的通知</a></span>
                        <span style="float: right;" class="right">1-15</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 15px;line-height: 23px;" class="left">
                            <a href="javascript:;"
                                title="魏宁博士研究成果在国际知名期刊《IEEE Transactions on Industrial Informatics》发表">魏宁博士研究成果在国际知名期刊《IEEE
                                Transactions on Industrial Informatics》发表</a></span>
                        <span style="float: right;" class="right">6-29</span>
                    </div>
                </div>
            </div>

            <div class="graytable" style="padding:0 0 0 20px; width: 356.74px;">
                <div class="title">
                    <div class="title1" style="width: 25%;">学术动态</div>
                    <div class="title2">ACADEMIC</div>
                    <a href="javascript:;">
                        <div class="iconfont icon-gengduo" style="margin-left: 20px;"></div>
                    </a>
                </div>
                <div class="line"></div>

                <div class="artical">
                    <div class="content">
                        <span style="font-size: 14px;line-height: 23px;" class="left">
                            <a href="javascript:;"
                                title="研究生罗智明荣获武汉计算机软件工程学会优秀硕士研究生奖">研究生罗智明荣获武汉计算机软件工程学会优秀硕士研究生奖</a></span>
                        <span style="float: right;" class="right">3-9</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 14px;line-height: 23px;" class="left">
                            <a href="javascript:;"
                                title="魏宁博士研究成果在国际知名期刊《IEEE Transactions on Industrial Informatics》发表">魏宁博士研究成果在国际知名期刊《IEEE
                                Transactions on Industrial Informatics》发表</a></span>
                        <span style="float: right;" class="right">6-29</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 14px;line-height: 23px;" class="left">
                            <a href="javascript:;" title="孙航博士在遥感与地球科学领域国际顶级期刊发表文章">孙航博士在遥感与地球科学领域国际顶级期刊发表文章</a></span>
                        <span style="float: right;" class="right">10-8</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 14px;line-height: 23px;" class="left">
                            <a href="javascript:;" title="【计信讲坛】第121讲 滇东北地区三维电性结构及其地球动力学意义">【计信讲坛】第121讲
                                滇东北地区三维电性结构及其地球动力学意义</a></span>
                        <span style="float: right;" class="right">9-21</span>
                    </div>


                    <div class="content">
                        <span style="font-size: 14px;line-height: 23px;" class="left">
                            <a href="javascript:;" title="学术讲座 智能6G网络资源管理">
                                学术讲座 智能6G网络资源管理</a></span>
                        <span style="float: right;" class="right">7-29</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 14px;line-height: 23px;" class="left">
                            <a href="javascript:;" title="学术讲座 基于无网格压缩感知的目标参数估计">
                                学术讲座 基于无网格压缩感知的目标参数估计</a></span>
                        <span style="float: right;" class="right">6-29</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 15px;line-height: 23px;" class="left">
                            <a href="javascript:;" title="[计信讲坛] 第118讲 电极-电解质固液界面的分子尺度模拟研究">[计信讲坛] 第118讲
                                电极-电解质固液界面的分子尺度模拟研究</a></span>
                        <span style="float: right;" class="right">3-22</span>
                    </div>
                </div>

            </div>
            <div class="graytable" style="padding:0 0 0 20px; width:356.71px">
                <div class="title">
                    <div class="title1" style="width:25%">就业信息</div>
                    <div class="title2">EMPLOYMENT</div>
                    <a href="javascript:;">
                        <div class="iconfont icon-gengduo"></div>
                    </a>
                </div>
                <div class="line"></div>

                <div class="artical">
                    <div class="content">
                        <span style="font-size: 14px;line-height: 23px;" class="left">
                            <a href="javascript:;" title="
                                我在小冰等你来【实习生招聘专场】">
                                我在小冰等你来【实习生招聘专场】</a></span>
                        <span style="float: right;" class="right">1-27</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 14px;line-height: 23px;" class="left">
                            <a href="javascript:;" title="2024宇视科技校招">2024宇视科技校招</a></span>
                        <span style="float: right;" class="right">4-8</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 14px;line-height: 23px;" class="left">
                            <a href="javascript:;"
                                title="深信服24届秋招岗位超前放送，领跑X计划正式启动（三峡大学站）">深信服24届秋招岗位超前放送，领跑X计划正式启动（三峡大学站）</a></span>
                        <span style="float: right;" class="right">10-24</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 14px;line-height: 23px;" class="left">
                            <a href="javascript:;" title="关于2024年度考试录用公务员公告解读">关于2024年度考试录用公务员公告解读</a></span>
                        <span style="float: right;" class="right">5-2</span>
                    </div>


                    <div class="content">
                        <span style="font-size: 15px;line-height: 23px;" class="left">
                            <a href="javascript:;" title="浙江大华技术股份有限公司">浙江大华技术股份有限公司</a></span>
                        <span style="float: right;" class="right">9-18</span>
                    </div>
                    <div class="content">
                        <span style="font-size: 15px;line-height: 23px;" class="left">
                            <a href="javascript:;" title="恒生电子2024校园招聘-三峡大学专场宣讲会">恒生电子2024校园招聘-三峡大学专场宣讲会</a></span>
                        <span style="float: right;" class="right">9-12</span>
                    </div>

                    <div class="content">
                        <span style="font-size: 15px;line-height: 23px;" class="left">
                            <a href="javascript:;"
                                title="三峡大学计算机与信息学院2023届毕业生IT专场招聘会邀请函">三峡大学计算机与信息学院2023届毕业生IT专场招聘会邀请函</a></span>
                        <span style="float: right;" class="right">5-12</span>
                    </div>
                </div>
            </div>



        </div>

        <div class="links">
            <div class="words">
                <div class="Cwords">
                    相关链接
                </div>
                <div class="Ewords"> RELATED LINKS</div>


                <a href="xsgz/jyxx.htm">
                    <div class="iconfont icon-gengduo"></div>
                </a>
            </div>
            <div class="pic">
                <img src="../images/l1.png" alt="">
                <img src="../images/l2.png" alt="">
                <img src="../images/l3.png" alt="">
                <img src="../images/l4.png" alt="">
            </div>

        </div>

    </div>

    <div class="footer">
        <div> CopyRights ©2007-2008 All Rights Reserved 三峡大学计算机与信息学院</div>
        <div>电 话：(0717)6393156 邮 编：443002</div>
        <div>地 址：湖北省宜昌市大学路8号 电子邮件：jsjyb@ctgu.edu.cn</div>


    </div>



    <script>

        (function () {

            let data = [
                { url: "../images/c1.png", word: "当十八岁遇见一百岁，校长喊你过成人礼" },
                { url: "../images/c2.png", word: "学院召开2024届毕业生班主任工作会暨考研就业工作布置会" },
                { url: "../images/c3.png", word: "我院学生在全国大学生嵌入式芯片与系统设计竞赛中荣获佳绩" },
                { url: "../images/c4.jpg", word: "计算机与信息学院召开“情系三大，筑梦计信”校友座谈会" },
                { url: "../images/c5.png", word: "学院召开研究生教育工作专题研讨会" },

            ]
            const button1 = document.querySelector(".button1")
            const button2 = document.querySelector(".button2")
            const button3 = document.querySelector(".button3")
            const button4 = document.querySelector(".button4")
            const button5 = document.querySelector(".button5")
            const img = document.querySelector(".bottom img")

            const word = document.querySelector(".bwords")
            const active = document.querySelector(".p-active")

            const list = document.querySelector(".rolling ul ")

            let x = 0;

            console.log(active)
            console.log(list)

            list.addEventListener("click", function (e) {
                console.log(e.target.dataset.name)
                // console.log(e.target.tagName)

                document.querySelector('.p-active').classList.remove("p-active")
                e.target.classList.add("p-active")

                if (e.target.dataset.name == "a") {
                    x = 0
                    img.src = data[x].url
                    word.innerHTML = data[x].word
                }
                else if (e.target.dataset.name == "b") {
                    x = 1
                    img.src = data[x].url
                    word.innerHTML = data[x].word

                } else if (e.target.dataset.name == "c") {
                    x = 2
                    img.src = data[x].url
                    word.innerHTML = data[x].word
                } else if (e.target.dataset.name == "d") {
                    x = 3
                    img.src = data[x].url
                    word.innerHTML = data[x].word
                } else if (e.target.dataset.name == "e") {
                    x = 4
                    img.src = data[x].url
                    word.innerHTML = data[x].word
                }
            })



            setInterval(function () {

                img.src = data[x].url
                word.innerHTML = data[x].word
                document.querySelector('.p-active').classList.remove("p-active")
                document.querySelector(`.button${x + 1}`).classList.add('p-active')

                x++
                console.log(x)
                if (x >= 5) x = 0

            }, 2500)





        })();



        (function () {

            const top = document.querySelector(".header")

            const one = document.querySelector("#one")
            const two = document.querySelector("#two")
            const three = document.querySelector("#three")
            const four = document.querySelector("#four")
            const five = document.querySelector("#five")
            const six = document.querySelector("#six")
            const seven = document.querySelector("#seven")
            const eight = document.querySelector("#eight")
            const nine = document.querySelector("#nine")
            const ten = document.querySelector("#ten")
            const eleven = document.querySelector("#eleven")

            const head = document.querySelector(".list")
            const active2 = document.querySelector(".active2 ul")
            const active3 = document.querySelector(".active3 ul")
            const active4 = document.querySelector(".active4 ul")
            const active5 = document.querySelector(".active5 ul")
            const active6 = document.querySelector(".active6 ul")
            const active7 = document.querySelector(".active7 ul")
            const active8 = document.querySelector(".active8 ul")
            const active9 = document.querySelector(".active9 ul")
            const active10 = document.querySelector(".active10 ul")
            const active11 = document.querySelector(".active11 ul")


            console.log(one)

            top.addEventListener("mouseenter", function () {

                two.classList.remove("active")
                active2.style.display = "none"

                three.classList.remove("active")
                active3.style.display = "none"

                four.classList.remove("active")
                active4.style.display = "none"

                five.classList.remove("active")
                active5.style.display = "none"

                six.classList.remove("active")
                active6.style.display = "none"

                seven.classList.remove("active")
                active7.style.display = "none"

                eight.classList.remove("active")
                active8.style.display = "none"

                nine.classList.remove("active")
                active9.style.display = "none"

                ten.classList.remove("active")
                active10.style.display = "none"

                eleven.classList.remove("active")
                active11.style.display = "none"

            })


            one.addEventListener("mouseenter", function () {
                console.log(1)
                one.classList.add("active")

                two.classList.remove("active")
                active2.style.display = "none"
            })
            one.addEventListener("mouseleave", function () {
                one.classList.remove("active")
            })


            two.addEventListener("mouseenter", function () {
                console.log(1)
                two.classList.add("active")
                active2.style.display = "block"

                three.classList.remove("active")
                active3.style.display = "none"
            })


            active2.addEventListener("mouseleave", function () {
                two.classList.remove("active")
                active2.style.display = "none"
            })


            three.addEventListener("mouseenter", function () {
                console.log(1)
                three.classList.add("active")
                active3.style.display = "block"

                two.classList.remove("active")
                active2.style.display = "none"

                four.classList.remove("active")
                active4.style.display = "none"
            })

            active3.addEventListener("mouseleave", function () {
                three.classList.remove("active")
                active3.style.display = "none"



            })


            four.addEventListener("mouseenter", function () {
                console.log(1)
                four.classList.add("active")
                active4.style.display = "block"

                three.classList.remove("active")
                active3.style.display = "none"

                five.classList.remove("active")
                active5.style.display = "none"


            })

            active4.addEventListener("mouseleave", function () {
                four.classList.remove("active")
                active4.style.display = "none"

            })

            five.addEventListener("mouseenter", function () {
                console.log(1)
                five.classList.add("active")
                active5.style.display = "block"

                four.classList.remove("active")
                active4.style.display = "none"

                six.classList.remove("active")
                active6.style.display = "none"
            })

            active5.addEventListener("mouseleave", function () {
                five.classList.remove("active")
                active5.style.display = "none"
            })

            six.addEventListener("mouseenter", function () {
                console.log(1)
                six.classList.add("active")
                active6.style.display = "block"

                five.classList.remove("active")
                active5.style.display = "none"

                seven.classList.remove("active")
                active7.style.display = "none"
            })

            active6.addEventListener("mouseleave", function () {
                six.classList.remove("active")
                active6.style.display = "none"
            })

            seven.addEventListener("mouseenter", function () {
                console.log(1)
                seven.classList.add("active")
                active7.style.display = "block"

                six.classList.remove("active")
                active6.style.display = "none"

                eight.classList.remove("active")
                active8.style.display = "none"
            })

            active7.addEventListener("mouseleave", function () {
                seven.classList.remove("active")
                active7.style.display = "none"
            })

            eight.addEventListener("mouseenter", function () {
                console.log(1)
                eight.classList.add("active")
                active8.style.display = "block"

                seven.classList.remove("active")
                active7.style.display = "none"

                nine.classList.remove("active")
                active9.style.display = "none"
            })

            active8.addEventListener("mouseleave", function () {
                eight.classList.remove("active")
                active8.style.display = "none"
            })


            nine.addEventListener("mouseenter", function () {
                console.log(1)
                nine.classList.add("active")
                active9.style.display = "block"

                eight.classList.remove("active")
                active8.style.display = "none"

                ten.classList.remove("active")
                active10.style.display = "none"


            })

            active9.addEventListener("mouseleave", function () {
                nine.classList.remove("active")
                active9.style.display = "none"
            })

            ten.addEventListener("mouseenter", function () {
                console.log(1)
                ten.classList.add("active")
                active10.style.display = "block"

                nine.classList.remove("active")
                active9.style.display = "none"

                eleven.classList.remove("active")
                active11.style.display = "none"
            })

            active10.addEventListener("mouseleave", function () {
                ten.classList.remove("active")
                active10.style.display = "none"
            })

            eleven.addEventListener("mouseenter", function () {
                console.log(1)
                eleven.classList.add("active")
                active11.style.display = "block"

                ten.classList.remove("active")
                active10.style.display = "none"
            })

            active11.addEventListener("mouseleave", function () {
                eleven.classList.remove("active")
                active11.style.display = "none"
            })






        })();


        (function () {
            const input = document.querySelector("[type='text']")
            const banner = document.querySelector(".banner")


            input.addEventListener("click", function () {

                input.style.border = "2px solid black";
                input.style.outline = "1px solid white";
            })


            banner.addEventListener("click", function () {
                // console.log(banner)
                input.style.border = "none";
                input.style.outline = "none";


            })

        })();



        (function () {

            const pic = document.querySelector(".pic img")
            let i = 1
            setInterval(function () {
                pic.src = `../images/ban${i}.png`
                i++
                if (i >= 4) i = 1

            }, 1000)

        })();



    </script>

</body>

</html>